

const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

/**
 * 
 * output: 输出
 * 
 * 
 */

module.exports = {
    entry: "./src/index.js",
    output: {
        // 文件名称（可以指定名称 [name].js 和目录 js/[name].js）
        filename: "[name].js",
        // 输出的文件目录（将来所有资源输出的公共目录）
        path: resolve(__dirname, "build"),
        // 所有资源的引入公共路径的前缀，比如所在html文件中的引入<script src='main.js'></script>  
        // 加上publicPath 后 就会变成 <script src='/main.js'></script> 
        publicPath: "./",
        // 非入口chunk的名称 chunkFilename大于filename，如果没有chunkFilename 则，非入口文件名称按照filename的规则
        // 有两种情况会出现非入口chunk 1.使用import("")引入的文件；2.使用optimization划分的node_modules中的第三方模块
        chunkFilename: "[name]_chunk.js",
        // 将库中的内容以一个变量向外暴露。 [name]  表示变量名称使用chunk名
        library: "[name]",
        // 将向外暴露的变量添加到哪个属性上  这里的window指浏览器上的全局变量   window/global/commonjs(以commonjs模块化的方式向外暴露)
        libraryTarget: "commonjs"
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    mode: "development"
}